웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지의 특정 요소 위에 마우스를 올릴 경우 기본 마우스 커서가 아닌 다른 마우스 커서가 나타나는 것을 볼 수 있습니다. 예를들어 뭔가가 실행 중인 경우 모래시계의 마우스 커서가 나타날 수 있고 또한 클릭 후 드래그를 수행할 경우 이동(드래그) 형태의 아이콘을 바뀌는 것처럼 말이죠.
이처럼 마우스 커서는 현재의 상태를 알려줄 수 있는 좋은 인터페이스 역할을 하기도 합니다. 만약 CSS를 사용하여 마우스 커서를 변경하고 싶다면 어떻게 해야할까요? 이 경우 cursor 속성을 사용합니다.
css의 cursor 속성은 다양한 마우스 커서를 선택할 수 있도록 도와줍니다. 이를 사용해 사용자에게 좋은 ui / ux 경험을 제공할 수 있으므로 상황에 따른 적절한 마우스 커서 변경은 반드시 필요하겠습니다. 그럼 아래에서는 어떻게 바꾸는지 알아봅니다.
.test { cursor: default; }
위 코드는 css의 cursor 속성을 사용해 마우스 커서의 모양을 변경한 모습니다. 이처럼 cursor 속성은 다양한 마우스 커서 모양으로 변경이 가능하게 하죠. 이때 사용 가능한 속성은 다음과 같습니다.
! 선택가능한 속성값
default // 기본값으로 화살표
cursor // 클릭가능한 경우를 나타내는 손모양
crosshair // 십자모양의 선
progress // 처리중임을 나타냄
wait // 모래시계로 기다려야 하는 경우
help // 물음표 표시
move // 이동가능한 대상을 표시
url(address) // url을 이용해 이미지를 가져올 경우 (custom cursor)
# 마우스 커서 변경 예제보기
아래는 css를 사용하는 cursor 속성 사용 방법입니다..test { cursor: default; }
위 코드는 css의 cursor 속성을 사용해 마우스 커서의 모양을 변경한 모습니다. 이처럼 cursor 속성은 다양한 마우스 커서 모양으로 변경이 가능하게 하죠. 이때 사용 가능한 속성은 다음과 같습니다.
! 선택가능한 속성값
default // 기본값으로 화살표
cursor // 클릭가능한 경우를 나타내는 손모양
crosshair // 십자모양의 선
progress // 처리중임을 나타냄
wait // 모래시계로 기다려야 하는 경우
help // 물음표 표시
move // 이동가능한 대상을 표시
url(address) // url을 이용해 이미지를 가져올 경우 (custom cursor)
! 마우스 커서 변경이 필요한 경우
그렇다면 어떤 상황에 마우스 커서를 변경할까요? 우선 아래의 상황에서 가장 많이 사용된다고 볼 수 있습니다.
- i. 링크로 이동이 가능한 요소
- ii. 드래그 하여 이동할 경우
- iii. 파일 또는 데이터를 로딩하는 경우
- iv. 툴팁등의 텍스트개 존재하는 요소의 경우
- v. 마우스 커서 변경을 원하지 않는 경우
위에 언급된 상황에서는 대부분 마우스 커서를 적합한 형태로 많이 바꾸어 보여줍니다. 더 나은 사용자 경험을 위해서 마우스 커서에 대한 부분들도 신경써 바꿔주면 더 좋을 것입니다.
# 마우스 커서 어떻게 바뀌는지 확인해보기
아래는 직접 마우스 커서가 변경되는 모습을 확인할 수 있습니다. 아래의 원에 마우스를 올리면 해당하는 커서가 나타나게됩니다.<div class="test-cursor" style="cursor: default;">cursor: default</div>
<div class="test-cursor" style="cursor: copy;">cursor: copy</div>
<div class="test-cursor" style="cursor: pointer;">cursor: pointer</div>
<div class="test-cursor" style="cursor: crosshair;">cursor: crosshair</div>
<div class="test-cursor" style="cursor: progress;">cursor: progress</div>
<div class="test-cursor" style="cursor: help;">cursor: help</div>
<div class="test-cursor" style="cursor: move;">cursor: move</div>
<style>
.test-cursor {
vertical-align: middle;
background: #e9e9e9;
display: inline-block;
width: 124px;
padding-top: 46px;
height: 124px;
text-align: center;
border-radius: 50%;
border: 1px solid #d2d2d2;
margin: 10px;
}
</style>
<div class="test-cursor" style="cursor: copy;">cursor: copy</div>
<div class="test-cursor" style="cursor: pointer;">cursor: pointer</div>
<div class="test-cursor" style="cursor: crosshair;">cursor: crosshair</div>
<div class="test-cursor" style="cursor: progress;">cursor: progress</div>
<div class="test-cursor" style="cursor: help;">cursor: help</div>
<div class="test-cursor" style="cursor: move;">cursor: move</div>
<style>
.test-cursor {
vertical-align: middle;
background: #e9e9e9;
display: inline-block;
width: 124px;
padding-top: 46px;
height: 124px;
text-align: center;
border-radius: 50%;
border: 1px solid #d2d2d2;
margin: 10px;
}
</style>
아래의 글도 찾고 계시지 않나요?
